﻿@model  IEnumerable<WebApp.Models.OrgChart>
@{
    ViewData["Title"] = "拓扑结构";
    ViewData["PageName"] = "OrgChart";
    ViewData["Heading"] = "<i class='fal fa-window text-primary'></i>  拓扑结构";
    ViewData["Category1"] = "设备管理";
    ViewData["PageDescription"] = "";
}
@section HeadBlock {
  <style>
  /*Now the CSS*/
  * {margin: 0; padding: 0;}
  .table{
  margin: auto;
  width:0px !important;
  margin-bottom:0px !important;
  }
    .tree {
      margin: auto;
    }
      .tree ul {
        margin: auto;
        padding-top: 20px;
        position: relative;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
      }

      .tree li {
        margin: auto;
        float: left;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 10px 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
      }

  /*We will use ::before and ::after to draw the connectors*/

  .tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
  }
  .tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
  }

  /*We need to remove left-right connectors from elements without
  any siblings*/
  .tree li:only-child::after, .tree li:only-child::before {
  display: none;
  }

  /*Remove space from the top of single children*/
  .tree li:only-child{ padding-top: 0;}

  /*Remove left connector from first child and
  right connector from last child*/
  .tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
  }
  /*Adding back the vertical connector to the last nodes*/
  .tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  }
  .tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  }

  /*Time to add downward connectors from parents*/
  .tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
  }

  .tree li a{
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;

  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  }

  /*Time for some hover effects*/
  /*We will apply the hover effect the the lineage of the element also*/
  .tree li a:hover, .tree li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
  }
  /*Connector styles on hover*/
  .tree li a:hover+ul li::after,
  .tree li a:hover+ul li::before,
  .tree li a:hover+ul::before,
  .tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
  }

  /*Thats all. I hope you enjoyed it.
  Thanks :)*/
    </style>
}

<div id="panel-1" class="panel">
  <div class="panel-hdr">
    <h2>
      拓扑结构 <span class="fw-300"><i>内容</i></span>
    </h2>
    <div class="panel-toolbar">
      <button class="btn btn-panel waves-effect waves-themed" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
      <button class="btn btn-panel waves-effect waves-themed" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
    </div>
  </div>
  <div class="panel-container show">
    <div class="panel-content p-0">
      <div class="tree">
        <ul>
          @{
            var nodes = Model;
            if (nodes.Any())
            {
              foreach (var node in nodes.Where(x => x.ParentId == null))
              {
                @RenderSubMenuRecursive(node)
              }
            }
          }
          @helper RenderSubMenuRecursive(WebApp.Models.OrgChart node)
          {

            var childNodes = Model.Where(x => x.ParentId == node.Id);
            if (childNodes.Any())
            {
              <li>
                <table class="table table-bordered">
                  <tr>
                    <td width="50%">@node.No</td>
                    <td width="50%">@node.Precision</td>
                  </tr>
                  <tr>
                    <td>@node.DN</td>
                    <td>@node.Year</td>
                  </tr>
                  <tr>
                    <td colspan="2">@node.Level  -  @node.LevelNo</td>

                  </tr>
                  <tr>
                    <td colspan="2">@node.Location </td>

                  </tr>
                </table>
                <ul>
                  @foreach (var childNode in childNodes)
                  {
                    @RenderSubMenuRecursive(childNode)
                  }
                </ul>
              </li>
            }
            else
            {

              <li>
                <table class="table table-bordered">
                  <tr>
                    <td width="50%">@node.No</td>
                    <td width="50%">@node.Precision</td>
                  </tr>
                  <tr>
                    <td>@node.DN</td>
                    <td>@node.Year</td>
                  </tr>
                  <tr>
                    <td colspan="2">@node.Level  -  @node.LevelNo</td>

                  </tr>
                  <tr>
                    <td colspan="2">@node.Location </td>

                  </tr>
                </table>
              </li>

            }
          }
          
        </ul>
      </div>
    </div>
  </div>
</div>

@section ScriptsBlock {
  <script type="text/javascript">

  </script>

}
